import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { TableRenderColumnTypes } from '@/render/TableRender'
import type { FilterDto } from '@/render/FilterRender'
import type { AnyObject } from '@/types'
import TableRender from '@/render/TableRender'
import type { BulletPaywageUserDto } from '@/api/bullet/types'
import {
    getBulletPaywagelUserList,
} from '@/api/bullet'
import { MiniProgramAdminTypeCnEnum } from '@/const/enum'
import DialogRemove from './DialogRemove'
import type { VxeTablePropTypes } from 'vxe-table'
import CustomTitle from '@/components/custom-title/Index'
import { Button, message, Tooltip } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
@Component
export class BulletPaywage extends TableRender {
    showRemove = false
    curItem = {} as BulletPaywageUserDto

    isBatch = false
    ids = [] as number[]
    selected = [] as BulletPaywageUserDto[]

    filterConfig() {
        return {
            phone: {
                name: '手机号',
                element: 'input',
                value: ''
            }
        } as FilterDto
    }

    checkboxConfig = {
        labelField: 'companyId',
        
        checkMethod: ({row}) => {
            return !(row.isAdmin === 2 || row.isInApprovalProcess === 1)
        }

    } as VxeTablePropTypes.CheckboxConfig

    tableColumnConfigOld = () => [
        // { type: 'checkbox', title: '用户Id', width: 100, fixed: 'left' },
        // {
        //     field: 'companyId',
        //     title: '用户ID'
        // },
        {
            field: 'companyName',
            title: '公司名称',
            width: 180
        },
        {
            field: 'userName',
            title: '姓名',
            params: {
                tooltip: {
                    text: (row) => row.userName,
                    content: (row) => `手机号：${row.phone}`
                }
            },
            slots: {
                default: 'tooltip'
            }
        },
        {
            field: 'isAdmin',
            title: '小程序角色',
            formatter: ({ row }) => {
                return MiniProgramAdminTypeCnEnum[row.isAdmin]
            }
        },
        {
            field: 'createTime',
            title: '注册时间',
            width: 160
        },
        {
            field: 'saleName',
            title: '开发信息',
            params: {
                tooltip: {
                    underline: false,
                    link: true,
                    text: (row) => <span>点击查看</span>,
                    content: (row) => `<div style="word-break: no-break">openId：${row.openId}<div><div>userId：${row.userId}</div>`,
                }
            },
            slots: {
                default: 'tooltip'
            }
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            width: 100,
            params: {
                buttons: [
                    {
                        hidden: (row) => {
                            return !(
                                (row.isAdmin === 1 || row.isAdmin === 0) &&
                                row.isInApprovalProcess !== 1
                            )
                        },
                        text: '移出团队',
                        event: (row) => this.onRemove(row)
                    }
                ]
            },
            slots: {
                default: 'buttons',
                header: () => {
                    return (
                        <div class="flex items-center">
                            <div class="mr-5px">操作</div>
                            <Tooltip title="企业超管，不可移出或注销账号，需将超管转移后再次操作。在企业审批流中的人员不可以移出团队，需要将该人员移出审批流后再次操作">
                                <ExclamationCircleOutlined />
                            </Tooltip>
                        </div>
                    )
                }
            }
        }
    ] as TableRenderColumnTypes<BulletPaywageUserDto>

    async onRemove(row: BulletPaywageUserDto) {
        this.showRemove = true
        this.curItem = row
    }
    
    
    onHandleBatch() {
        this.ids = this.selected.map(i => i.id)
        if(!this.ids.length) {
            message.warning('请先选择用户')
            return
        }
        this.isBatch = true
        this.showRemove = true
    }

    onCheckboxChange() {
        this.selected = this.ref.getCheckboxRecords() as BulletPaywageUserDto[]
    }

    onCheckboxAll() {
        this.selected = this.ref.getCheckboxRecords() as BulletPaywageUserDto[]
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!filters.phone) return []
        return getBulletPaywagelUserList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    renderRightBtns() {
        return <Button type="primary" onClick={this.onHandleBatch}>批量操作</Button>
    }

    render() {
        return <div class="h-full flex flex-col">
            <CustomTitle>子弹发薪账号管理</CustomTitle>
            {super.renderFilter()}
            <CustomTitle>信息列表</CustomTitle>
            <div class="flex-1 h-full">
                {super.renderTable()}
            </div>
            <DialogRemove v-model={this.showRemove} curMember={this.curItem} isBatch={this.isBatch} ids={this.ids}/>
        </div>
    }
}

export default toNative<{}, {}>(BulletPaywage)
